<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>jQuery Snake</title>
	<link rel="stylesheet" type="text/css" media="screen" href="css/jq.css" /> 
	<link rel="stylesheet" type="text/css" media="screen" href="css/tabs.css" /> 
	<link rel="stylesheet" type="text/css" media="screen" href="css/snake.css" /> 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
	<!--<script type="text/javascript" src="/js/jquery.js"></script>-->
	<script type="text/javascript" src="js/jquery.snake.js"></script> 
	<script type="text/javascript">
		$(function(){
			// FF2/Mac Opacity Bug
			($.browser.mozilla && parseFloat($.browser.version) < 1.9 && navigator.appVersion.indexOf('Mac') !== -1) && $('body').css('-moz-opacity',.999);
			
			// setup the game
			Snake.setup();
			
			$("a#start-game").click(function(e){
				e.preventDefault();
				// start the game
				Snake.newGame();
			});
			
			$("a#bugs-exp").click(function(){
				$(".bugs").slideToggle();
			});
			$("a#source-exp").click(function(){
				$(".source").slideToggle();
			});
		});
	</script>	
</head>
<body>
	<div>
		<a id="logo" href="http://jquery.com" title="Powered By jQuery"></a>
	</div>
	<h1 id="banner">
		jQuery Snakey
	</h1>
	<div id="main">
	
		<ul id="nav" class="anchors">
			<li><a href="#overview">Overview</a></li>
		</ul>
		<div id="overview" class="tabContent">		
		
			<div id="snake-col-info">

				<div id="marginLeft">
		
				<h2>Instructions</h2>
				<p>
					Use the keyboard arrow keys to control the snake. Eat the specified amount of cherries to advance to the next level, without slithering
					into yourself or a wall. The speed and length of the snake will increase with every cherry eaten. 
					The game ends when you have used up all your lives, or when you finish all levels. Have fun!			
				</p>
				
				<h2>Shortcut Keys</h2>
				<ul>
					<li>P : Pause/Resume Game</li>
					<li>N : New Game</li>
					<li>G : Toggle Grid</li>			
				</ul>
				
				<h2>Bugs &amp; Todo <a id="bugs-exp" href="javascript:;">[+]</a></h2>
				<ul class="bugs hidden">
					<li><strike>TODO: Make snake grow in length</strike></li>
					<li><strike>TODO: Introduce levels</strike></li>
					<li><strike>TODO: Introduce wall obstacles</strike></li>
					<li><strike>TODO: Game over when snake slithers into itself</strike></li>
					<li><strike>BUG: new game, need to reset segment object using initial values</strike></li>
					<li><strike>BUG: cherries cannot be positioned under snake or wall segments</strike></li>
					<li>BUG: snake needs to grow from tail and not from head</li>
					<li><strike>TODO: add multiple wall obstacles</strike></li>
					<li>TODO: Track/store high scores</li>
				</ul>

				<h2>Source <a id="source-exp" href="javascript:;">[+]</a></h2>
				<ul class="source hidden">
					<li>
						<a href="http://jquery-snakey.googlecode.com/svn/trunk/js/jquery.snake.js">jquery.snake.js</a> 
						(Uncompressed &amp; commented)
					</li>
				</ul>

				<p>Test on FF2; FF3; Opera 9.52; IE6</p>

				</div>
			</div>		
			
			<div id="snake-col-map">
		
				<noscript class="error">
					You need javascript enabled on your browser to be able to play this game.
				</noscript>
			
				<div id="map1">
					<span id="map-msg">
						<!-- click to give focus to the document -->
						<a href="#start" id="start-game">
							<img src="img/snake/start_game.jpg" />
						</a>
					</span>
				</div>	
				<div id="stats">
					<span class="right">Eaten: 
						<span id="stats-eaten">0</span> /
						<span id="stats-totcherries">0</span>
					</span>
					Level: <span id="stats-level">0</span> | 
					Lives: <span id="stats-lives">0</span> |
					Score: <span id="stats-score">0</span>
				</div>	
			</div>
		</div>
	</div> 
</body>
</html>
